<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端相关概念</title>
</head>
<body>
  
</body>
<script>
  /* 
  1、像素
    设备像素  （物理像素）单位：pt 点，设备像素在出厂时就被厂家设定好了
    CSS像素 （设备独立像素、逻辑像素）单位：px,W3C规定的一个相对单位

  2、屏幕尺寸：屏幕对角线的长度
    1inc=2.54cm
    屏幕尺寸 = 屏幕斜边的长度/PPI

  3、像素密度（PPI）
    PPI = 屏幕斜边的长度/屏幕尺寸


  4、像素比（DPR）
    DPR=设备像素/css像素
    iphone6 = 750/375 = 2

  5、视口（可视区窗口） 通过meta标签设置
    content 视口里的相关设置
    width:视口的宽度，值为数字，或字符串device-width（设备的实际宽度）
    height:视口的高度（与width一致）
    user-scalable：是否允许用户进行页面缩放，值为no或者yes，代表不允许与允许
    initial-scale：页面初始缩放值，值为数字（可以带小数）
    maximum-scale:页面最大能够缩放的比例，值为数字（可以带小数）
    minimum-scale:页面最小能够缩放的比例，值为数字（可以带小数）

  
  
   */

  // 求斜边的长度
  var len = Math.sqrt(Math.pow(1080,2)+Math.pow(1920,2));
  console.log('斜边长度：',len); //斜边长度： 2202.9071700822983
  console.log("屏幕尺寸：" ,len/401); //屏幕尺寸： 5.493534089980794
  console.log("像素密度（PPI）:" ,len/5.5); //像素密度（PPI）: 400.52857637859967
  console.log("像素比（DPR）:",window.devicePixelRatio);  //像素比（DPR）: 1

</script>
</html>